<template>
  <div>
    <div style="width: 100%; height: 60vh" ref="map"></div>
  </div>
</template>
<script>
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";
import axios from "axios";
import * as echarts from "echarts";
export default {
  mounted() {
    this.getMap();
  },
  mixins: [resize],
  methods: {
    getMap() {
      // // 初始化统计图对象
      var map = echarts.init(this.$refs["map"]);
      // 显示 loading 动画
      map.showLoading();
      // 再得到数据的基础上，进行地图绘制
      axios.get("/json/map.json").then((res) => {
        console.log(res);
        // 得到结果后，关闭动画
        map.hideLoading();
        // 注册地图(数据放在axios返回对象的data中哦)
        echarts.registerMap("XQZ", res.data);
        var option = {
          itemStyle: {
            normal: {
              color: "#152040",
            },
          },

          series: [
            {
              name: "星桥镇地图",
              type: "map",
              map: "XQZ", // 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
              label: {
                show: true,
                color: "#ffffff",
              },
              itemStyle: {
                borderColor: "rgba(147, 235, 248, 1)",
                areaColor: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 0.9,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#042B5E", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#042B5E", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
                borderWidth: 1,
              },
            },
          ],
        };
        map.setOption(option);
      });
    },
  },
};
</script>
